<template>
  <div class="login-background">
    <div class="login-container">
      <div class="banner-wrapper">
        <el-image 
          class="login-banner"
          :src="bannerUrl"
          fit="cover"
          :preview-src-list="false"
        />
        <div class="divider-line"></div>
      </div>

      <el-form 
        ref="loginFormRef" 
        :model="loginForm" 
        :rules="loginRules"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input 
            v-model="loginForm.username" 
            placeholder="请输入用户名"
            prefix-icon="User"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input 
            v-model="loginForm.password" 
            type="password" 
            placeholder="请输入密码"
            prefix-icon="Lock"
            autocomplete="new-password"
          />
        </el-form-item>

        <el-form-item class="action-wrapper">
          <el-button 
            type="primary" 
            @click="handleLogin"
            class="login-btn"
          >
            立即登录
          </el-button>
        </el-form-item>
      </el-form>
      <pan class="copyright">程序开发：曹炽兴</pan>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/userStore';
import { apiClient } from '@/api/base'
import bannerImg from '@/assets/login_banan.jpg'

const loginFormRef = ref(null);
const bannerUrl = ref(bannerImg);

// 每次挂载时重置表单数据
const loginForm = ref({
  username: '',
  password: ''
});

const loginRules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度6-20位', trigger: 'blur' }
  ]
});

const router = useRouter();
const userStore = useUserStore();

// 组件挂载时清空表单
onMounted(() => {
  loginForm.value.username = '';
  loginForm.value.password = '';
});

const handleLogin = async () => {
  try {
    await new Promise(resolve => loginFormRef.value.validate(resolve));
    const response = await apiClient.post('/auth/login', {
      username: loginForm.value.username,
      password: loginForm.value.password
    });
    
    const { token, userId: id, nickname, permissions, roles } = response.data;
    userStore.setToken(token);
    userStore.setUserInfo({ id, username: loginForm.value.username, nickname, permissions, roles });
    
    // 登录成功后清空表单
    loginForm.value.username = '';
    loginForm.value.password = '';
    
    // 检查是否有重定向参数
    const redirect = router.currentRoute.value.query.redirect;
    if (redirect) {
      router.push(redirect);
    } else {
    router.push({ name: 'home' });
    }
  } catch (error) {
    ElMessage.error(error.message || '登录失败');
    console.error('登录错误详情:', error);
  }
};
</script>

<style scoped>
.login-background {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/src/assets/bg.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px; /* 移动端边距 */
}

.login-container {
  background: rgba(255, 255, 255, 0.95);
  padding: 32px 24px;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.login-container:hover {
  transform: translateY(-4px);
}

.banner-wrapper {
  margin-bottom: 24px;
}

.login-banner {
  height: 120px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.divider-line {
  height: 1px;
  background: #e5e7eb;
  margin: 0 -24px; /* 扩展到容器边缘 */
}

.login-form {
  padding: 0 12px; /* 表单内边距 */
}

.el-form-item {
  margin-bottom: 18px;
}

.el-input {
  height: 48px;
  border-radius: 8px;
}

.el-input__inner {
  height: 100%;
  padding-left: 40px; /* 图标占位 */
  font-size: 15px;
  border-color: #e5e7eb;
}

.el-input__inner:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.el-input__prefix {
  left: 12px;
}

.el-input__icon {
  font-size: 18px;
  color: #6b7280;
}

.login-btn {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* 移动端适配 */
@media (max-width: 576px) {
  .login-container {
    padding: 24px 16px;
    border-radius: 12px;
  }
  
  .login-banner {
    height: 100px;
  }
  
  .el-input {
    height: 44px;
  }
  
  .login-btn {
    height: 44px;
    font-size: 15px;
  }
}

.el-input__inner:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset;  /* 覆盖浏览器自动填充背景色 */
  -webkit-text-fill-color: #333;
}

.copyright {
  color:rgba(144, 143, 143, 0.95)
}
</style>
